<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <!-- <div class="top_content">
                <div class="data_item" v-for="(item, index) in top_content_data" :key="index">
                    <h3>{{ item.title }}</h3>
                    <ul>
                        <li v-for="(twe_item, i) in item.data" :key="i">
                            <h4>{{ twe_item.tag }}</h4>
                            <p>{{ twe_item.num }}</p>
                        </li>
                    </ul>
                </div>
            </div> -->
            <div class="date">
                <span :class="{ active: active == (index + 1) }" v-for="(item, index) in times" :key="index"
                    @click="change_active(index)">{{
                        item }}</span>
            </div>
            <div class="scrollbar">
                <el-scrollbar :always="true">
                    <div class="scrollbar-flex-content">
                        <p v-for="(item, index) in nav_list" :key="index" class="scrollbar-demo-item"
                            :class="{ active_nav: active_nav == index }" @click="change_active_nav(item, index)">
                            <span>{{ item.name }}</span>
                            <span class="num" v-if="index!=0">({{ item.num }})</span>
                            <span class="num" v-else>{{ item.num }}</span>
                        </p>
                    </div>
                </el-scrollbar>
            </div>
            <div class="bottom_content">
                <div class="search_input">

                    <div class="_left">
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <div class="information_number">
                                    <span>信息编号：</span>
                                    <div>
                                        <el-input v-model="information_number" placeholder="请输入信息编号" size="large" />
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="phone_number">
                                    <span>手机号：</span>
                                    <div>
                                        <el-input v-model="phone_number" placeholder="请输入用户手机号" size="large" />
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="we_chat">
                                    <span>微信号：</span>
                                    <div>
                                        <el-input v-model="we_chat" placeholder="请输入用户微信号" size="large" />
                                    </div>
                                </div>
                            </el-col>

                            <el-col :span="3">
                                <div class="submit_button">
                                    <el-button type="primary" size="large" @click="inquire">查询</el-button>
                                    <el-button type="warning" size="large" @click="reset">重置</el-button>
                                </div>
                            </el-col>

                        </el-row>

                    </div>

                </div>
                <div class="table_list">
                    <div class="morning">
                        <el-badge :value="shangwu" :max="99" class="item">
                            <span :class="{ time_type: time_type == 1 }" @click="change_time_type(1)">
                                上午待办
                            </span>
                        </el-badge>
                        <el-badge :value="xiawu" :max="99" class="item">
                            <span :class="{ time_type: time_type == 2 }" @click="change_time_type(2)">
                                下午待办
                            </span>

                        </el-badge>
                    </div>
                    <div class="table_right">
                        <div class="table">
                            <Table :list="table_list" :type="active_nav"/>
                        </div>
                        <div class="pagination">
                            <Pagination :list="page_list" :limit="limit" @change="page_change" v-if="table_list.length > 0" />
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Nav from "@/components/public/nav.vue"
import Pagination from "@/components/home/task/pagination.vue"
import Table from "@/components/home/search/table.vue"
import { get_label_list, get_tab_data } from "@/request/api/search.ts"
import { get_user_data, get_region_data } from "@/request/api/user.ts"
import { useRoute } from 'vue-router'
const router = useRoute()
// 获取日期
function getDate(time: number) {
    const date = new Date();
    date.setDate(date.getDate() - time)
    let oMonth = date.getMonth() + 1,
        oDate = date.getDate();
    console.log(date, "date", oMonth, oDate);
    return {
        oMonth, oDate
    }
}
const times = [
    "今日", getDate(1).oMonth + "." + getDate(1).oDate, getDate(2).oMonth + "." + getDate(2).oDate
]
// 上午数目
let shangwu = ref(0)
// 下午数目
let xiawu = ref(0)
// 选中的日期
let active = ref(1)
// 下面的导航信息
const nav_list: any = ref([])
// 选中的导航
let active_nav = ref(0)
let table_list = ref("")
let page_list = ref("")
// 选中的标签id
let cat_1 = ref(0)
const limit = ref(7)
let params_init: any = {
    day_type: "",
    limit: limit.value,
    page: 1,
    time_type: 1,
    cat_1: 0,
    no: "",
    mobile: "",
    number: "",
}
let maintainers_list: any = ref()
let region_data: any = ref([])
let information_number = ref(''),
    phone_number = ref(''),
    we_chat = ref(''),
    maintainers = ref(''),
    region_release = ref(''),
    type_order = ref('');
// 默认选中上午
let time_type = ref(1)
const change_time_type = (index: number) => {
    time_type.value = index
    params_init.time_type = index
    get_tab()
}
const change_active = (num: number) => {
    active.value = num + 1
    params_init.day_type = active.value
    params_init.page = 1
    get_tab()
    get_label(active.value)
}
const change_active_nav = (item: any, index: number) => {
    active_nav.value = index
    cat_1.value = item.id
    console.log(item, "item");
    params_init.cat_1 = item.id
    get_tab()
}
// 查询
function inquire() {
    params_init.page = 1
    params_init.no = information_number.value
    params_init.mobile = phone_number.value
    params_init.number = we_chat.value
    // params_init.sys_user_id = maintainers.value
    // params_init.area = region_release.value[0]
    // params_init.city = region_release.value[1]
    // params_init.address = region_release.value[2]
    // params_init.style = type_order.value
    get_tab()
}
// 重置
function reset() {
    information_number.value = ''
    phone_number.value = ''
    we_chat.value = ''
    maintainers.value = ''
    region_release.value = ''
    type_order.value = ''
    params_init.no = information_number.value
    params_init.mobile = phone_number.value
    params_init.number = we_chat.value
    params_init.sys_user_id = maintainers.value
    params_init.area = ''
    params_init.city = ''
    params_init.address = ''
    params_init.style = ''
    params_init.page = 1
    get_tab()
}
// 维护人列表
const get_user_data_list = async () => {
    let { data } = await get_user_data()
    maintainers_list.value = data.list
}
async function get_label(str?:number) {
    let { data } = await get_label_list({ day_type: str||0 })
    console.log(data, "标签数据");

    nav_list.value = data
}
async function get_tab() {
    const loadingInstance = ElLoading.service()
    let { data } = await get_tab_data(params_init)
    console.log("get_tab_data", data);
    table_list.value = data.list
    page_list.value = data.pageData
    if(params_init.time_type == "2"){
        await get_tab_num("1")
        xiawu.value = data.pageData.handle_count
    }else{
        await get_tab_num("2")
        shangwu.value = data.pageData.handle_count
    }
    loadingInstance.close()
}

async function get_tab_num(type:string) {
    let { data } = await get_tab_data({
        day_type: active.value,
        limit: limit.value,
        page: 1,
        time_type: type,
        cat_1: cat_1.value,
        no: "",
        mobile: "",
        number: "",
        sys_user_id: "",
        area: "",
        city: "",
        address: "",
        style: ""
    })
    if(type == '2'){
        xiawu.value = data.pageData.handle_count
    }else{
        shangwu.value = data.pageData.handle_count
    }
}
const get_region_data_list = async () => {
    let { data } = await get_region_data({ is_tree: 1 })
    console.log(data, "地区数据");
    region_data.value = data
}
// 页数发生改变
const page_change = (val: any) => {
    params_init.page = val
    get_tab()
}
onMounted(async() => {
    await get_label()
    params_init.cat_1 = nav_list.value?.[0]?.id
    get_tab()
    get_user_data_list()
    get_region_data_list()

})
</script>
  
<style lang="scss" scoped>
.main {
    display: flex;


    .right_route {
        padding: 10px 20px 0 20px;
        flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);

        .top_content {
            display: flex;
            justify-content: space-evenly;

            .data_item {
                width: 50%;
                height: 120px;
                border-right: 2px solid #FAFAFA;
                // border: 1px solid rgba(233, 233, 233, 1);

                h3 {
                    height: 36px;
                    @include font(#333, 16, 36);
                    font-weight: 650;
                    padding-left: 20px;
                    // background-color: rgba(249, 249, 249, 1);
                    border-bottom: 1px solid rgba(233, 233, 233, 1);
                }

                ul {
                    display: flex;
                    height: 84px;
                    align-items: center;
                    justify-content: space-evenly;

                    li {
                        h4 {
                            @include font(#999999, 14, 25);
                            color: #606266;
                            font-size: 13px;
                        }

                        p {
                            font-family: 'Montserrat-Bold', 'Montserrat Bold', 'Montserrat', sans-serif;
                            // font-weight: 700;
                            font-size: 20px;
                            padding: 0 4px;
                            @include font(#666, 18, 25);
                            margin-top: 5px;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .bottom_content {
            margin-top: 20px;
            border-top: 1px solid rgba(215, 215, 215, 1);
            // border-bottom: 1px solid rgba(215, 215, 215, 1);
        }

        .date {
            display: flex;
            margin: 15px 0;

            span {
                display: inline-block;
                flex: 1;
                text-align: center;
                @include font(#333, 17, 40);
                background-color: #D8D8D8;
                cursor: pointer;
                height: 40px;
            }

            .active {
                background: rgba(64, 158, 255, 1);
                color: #FFF;
            }
        }

        .scrollbar {
            width: calc(100vw - 250px);
        }

        .search_input {
            // display: flex;
            // flex-wrap: wrap;

            .information_number,
            .phone_number,
            .we_chat,
            .maintainers,
            .region_release,
            .type_order {
                display: flex;
                // width: 334px;
                align-items: center;
                margin-top: 15px;
                // margin-right: 20px;

                span {
                    display: inline-block;
                    width: 70px;
                    @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
                }

                >div {
                    flex: 1;
                }
            }

            .submit_button {
                display: flex;
                align-items: center;
                margin-top: 15px;
                // justify-content: right;
                // margin-left: 410px;
            }
        }

        .table_list {
            margin-top: 20px;
            display: flex;

            .morning {
                width: 56px;
                height: 390px;

                span {
                    display: flex;
                    font-weight: 650;
                    font-style: normal;
                    font-size: 20px;
                    color: #333;
                    background: rgb(242, 242, 242);
                    height: 200px;
                    justify-content: center;
                    align-items: center;
                    padding: 0 10px;
                    box-sizing: border-box;
                    text-align: center;
                    cursor: pointer;
                }

                .time_type {
                    background: rgba(64, 158, 255, 1);
                    color: #FFF;
                }
            }

            .table_right {
                width: calc(100% - 56px);
            }

            .pagination {
                margin: 20px 0;
                display: flex;
                justify-content: center;
            }
        }
    }
}

.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    // background: var(--el-color-danger-light-9);
    @include font(#333, 13, 50);
    cursor: pointer;

    .num {
        margin-left: 5px;
    }

    &.active_nav {
        color: rgb(64, 158, 255);
    }
}

:deep(.el-select) {
    width: 100%;
}

:deep(.el-cascader) {
    width: 100%;
}

:deep(.el-input--large) {
    height: 32px;
}

:deep(.el-button) {
    height: 32px;
}

:deep(.el-badge__content.is-fixed) {
    z-index: 8;
    top: 170px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
</style>